<template>
  <div v-if="hasPerm('sysMachine:query')">
    <!-- 系统信息  Java信息-->
    <a-row :gutter="24">
      <a-col
        :md="12"
        :sm="24"
      >
        <a-card
          :loading="loading"
          title="系统信息"
          style="margin-bottom: 20px"
          :bordered="false"
        >
          <table class="sysInfo_table">
            <tr>
              <td class="sysInfo_td">
                系统名称：
              </td>
              <td class="sysInfo_td">
                {{ sysOsInfo.osName }}
              </td>
            </tr>

            <tr>
              <td class="sysInfo_td">
                系统架构：
              </td>
              <td class="sysInfo_td">
                {{ sysOsInfo.osArch }}
              </td>
            </tr>

            <tr>
              <td class="sysInfo_td">
                系统版本：
              </td>
              <td class="sysInfo_td">
                {{ sysOsInfo.osVersion }}
              </td>
            </tr>

            <tr>
              <td class="sysInfo_td">
                主机名称：
              </td>
              <td class="sysInfo_td">
                {{ sysOsInfo.osHostName }}
              </td>
            </tr>

            <tr>
              <td>主机IP地址：</td>
              <td>{{ sysOsInfo.osHostAddress }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>

      <a-col
        :md="12"
        :sm="24"
      >
        <a-card
          :loading="loading"
          title="Java信息"
          style="margin-bottom: 20px"
        >
          <table class="sysInfo_table">
            <tr>
              <td class="sysInfo_td">
                虚拟机名称：
              </td>
              <td class="sysInfo_td">
                {{ sysJavaInfo.jvmName }}
              </td>
            </tr>

            <tr>
              <td class="sysInfo_td">
                虚拟机版本：
              </td>
              <td class="sysInfo_td">
                {{ sysJavaInfo.jvmVersion }}
              </td>
            </tr>

            <tr>
              <td class="sysInfo_td">
                虚拟机供应商：
              </td>
              <td class="sysInfo_td">
                {{ sysJavaInfo.jvmVendor }}
              </td>
            </tr>

            <tr>
              <td class="sysInfo_td">
                java名称：
              </td>
              <td class="sysInfo_td">
                {{ sysJavaInfo.javaName }}
              </td>
            </tr>

            <tr>
              <td>java版本：</td>
              <td>{{ sysJavaInfo.javaVersion }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>
    </a-row>

    <a-card
      :loading="loading"
      title="JVM内存信息"
    >
      <table class="sysInfo_table">
        <tr>
          <td class="sysInfo_td">
            最大内存：
          </td>
          <td class="sysInfo_td">
            {{ sysJvmMemInfo.jvmMaxMemory }}
          </td>
          <td class="sysInfo_td">
            可用内存：
          </td>
          <td class="sysInfo_td">
            {{ sysJvmMemInfo.jvmUsableMemory }}
          </td>
        </tr>
        <tr>
          <td class="sysInfo_td">
            总内存：
          </td>
          <td class="sysInfo_td">
            {{ sysJvmMemInfo.jvmTotalMemory }}
          </td>
          <td class="sysInfo_td">
            已使用内存：
          </td>
          <td class="sysInfo_td">
            {{ sysJvmMemInfo.jvmUsedMemory }}
          </td>
        </tr>
        <tr class="sysInfo_tr">
          <td>空余内存：</td>
          <td>{{ sysJvmMemInfo.jvmFreeMemory }}</td>
          <td>使用率：</td>
          <td>{{ sysJvmMemInfo.jvmMemoryUsedRate }}</td>
        </tr>
      </table>
    </a-card>
  </div>
</template>

<script>
  import { sysMachineQuery } from '@/api/modular/system/machineManage'

  export default {
    data () {
      return {
        loading:true,
        sysOsInfo:[],
        sysJavaInfo:[],
        sysJvmMemInfo:[],
      }
    },

    //进页面加载
    created () {
      this.loadDataList()
    },

    methods: {
      //加载数据方法
      loadDataList(){
        sysMachineQuery().then((res)=>{
          this.loading=false
          this.sysOsInfo=res.data.sysOsInfo
          this.sysJavaInfo=res.data.sysJavaInfo
          this.sysJvmMemInfo=res.data.sysJvmMemInfo
        })
      },
    }

  }
</script>

<style lang="less">
  .sysInfo_table{
    width: 100%; min-height: 45px; line-height: 45px; text-align: center;
  }
  .sysInfo_td {
  border-bottom:1px solid #e8e8e8;
  }
</style>
